<template>
	<view class="intel-cus" ref="intelCus">
		<u-navbar
			safeAreaInsetTop
			fixed
			leftIconColor="#000000"
			leftText="智能客服"
			:autoBack="true"
			bgColor="#fff"
		/>
		<view class="pro-content">
			<view class="title-box" @click="changePage">
				猜你想问
				<view class="refresh-btn">换一换<uni-icons type="loop" color="#01756B" size="36"></uni-icons></view>
			</view>
			<view class="pro-item" v-for="item, idx in list" :key="idx" @click="getClickAnswer(item.id)">
				<u-cell
					v-if="getTag(idx + 1)"
					size="large"
					:title="item.question"
					isLink
				></u-cell>
				<view ref="proItem"></view>
			</view>
		</view>
		<view class="session-box">
			<view class="session-item" :style="{justifyContent: item.tag ? 'flex-start' : 'flex-end'}" v-for="item, idx in sessionList" :key="idx">
				<view :style="{background: item.tag ? '#fff' : '#D8F1EF'}">{{item.name}}</view>
			</view>
		</view>
		<view class="bottom-input">
			<u--input
				placeholder="请输入您的问题"
				border="surround"
				v-model="datas.value"
			></u--input>
			<!-- <input class="uni-input" v-model="datas.value"  placeholder="请输入您的问题" /> -->
			<u-button color="rgba(1, 117, 107, 0.36)" text="发送" @click="getAnswer(datas.value)"></u-button>

		</view>
		
	</view>
</template>

<script>
import {getList, answer, rsSort} from '@/api/customCenter/index';
	export default {
		data() {
			return {
				list: [],
				datas: {
					value: '',
				},
				noData: '您的问题暂未查询到相关信息，如有需要，请拨打人工客服',
				params: {
					pageNum: 1,
					pageSize: 100,
				},
				current: 1,
				pages: 0,
				sessionList: []
			}
		},
		onLoad(options) {
			let {id} = options;
			this.getClickAnswer(id)
			// if (type) {
			// 	this.getAnswer(type);
			// }
			this.getListFn(1);
		},
		methods: {
			getClickAnswer(id) {
				rsSort({
					id
				}).then(res => {
					this.sessionList = [
						...this.sessionList,
						{
							name: res?.data?.question, tag: false
						},
						{
							name: res?.data?.answer, tag: true
						},
					];
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 10000,
						})
					})
				})
			},
			changePage() {
				if (this.current < this.pages) {
					this.current += 1
				} else {
					this.current = 1
				}
			},
			getTag(i) {
				return (this.current -1 < (i/4)) && ((i/4) <= this.current)
			},
			getListFn(type) {
				getList({
					...this.params,
					// type
				}).then(res => {
					this.list = res?.data?.rows || []
					let total = res?.data?.rows?.length || 0
					this.pages = (total % 4 ) ? Number(Math.floor(total/4)) + 1 : Number(Math.floor(total/4));
				})
			},
			async getAnswer (question){
				if ( !question) {
					return this.$modal.msgError("请输入您的问题");
				}
				this.sessionList = [
					...this.sessionList,
					{
						name: question, tag: false
					}
				];
				answer({question}).then(res => {
					let arr = res?.data || [];
					this.sessionList = [
						...this.sessionList,
						{
							name: arr.length ? arr[0]?.answer || '' : this.noData, tag: true
						}
					]
					this.datas.value = undefined
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 10000,
						})
					})
				})
			},
			
		}
	}
</script>

<style lang="scss">
.intel-cus {
	padding-top: 208rpx;
	padding: 208rpx 32rpx;
	background: #F2F2F2;
	.pro-content {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx 32rpx 0;
		.title-box {
			font-size: 36rpx;
			font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F2;
			padding-bottom: 32rpx;
		}
		.refresh-btn {
			font-size: 32rpx;
			font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
			font-weight: 400;
			color: #01756B;
			line-height: 42rpx;
			.uni-icons {
				margin-left: 22rpx;
				font-size: 36rpx !important;
			}
		}
		.pro-item {
			border-bottom: 2rpx solid #F2F2F2;
			.u-cell__body--large{
				padding: 32rpx 0;
			}
			&:nth-last-of-type(1) {
				border: none;
			}
		}
	}
	.session-box{
		.session-item {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			view {
				padding: 24rpx 16rpx;
				font-size: 32rpx;
				font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
				border-radius: 12rpx;
				display: inline-block;
			}
		}
	}
	.bottom-input {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 32rpx 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: #F2F2F2;
		// .u-input {
		// 	flex: 1;
		// 	background: #fff;
		// }
		.u-button {
			margin-left: 22rpx;
			width: 108rpx;
		}

	}

}
</style>
